/* Copyright 2011 Elektrobit Wireless Communications Oy (EB)


  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License version 2 as 
  published by the Free Software Foundation.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License along
  with this program; if not, write to the Free Software Foundation, Inc.,
  51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.


 *All rights reserved 
 *Version:Elektrobit_Qt_1.0.0_20110305 */


import Qt 4.7
import "qmlItem" 1.0
//import "./script/script.js" as Script


Item{
    property int selectedItemIndex: fourButtons.currentIndex
    property bool fourButtonsMoving: fourButtons.moving

    function enterNextPage(index)
    {
        switch ( index ) {
        case 0:
            onIconClick("imageFilm");
            break;
        case 1:
            onIconClick("imageMusic");
            break;
        case 2:
            onIconClick("imagePicture");
            break;
        case 3:
            if(aboutInfo.visible == false) {
                aboutInfo.visible = true;
            }

            break;
        case -1:
            onIconClick("qtQuit");
            break;
        default:
            break;
        }
    }

    width: 640
    height: 360


    Rectangle {

        id:contentView
        objectName: "contentView"

        anchors.fill: parent

        color: "black"


        MovieWall{
            id:movieWall
            anchors.fill: parent
            backGroudImage: "../../images/sys/Background15.jpg"
            model:vedioDatas
            scale: 1.0
        }

        MovieWall{
            id:musicWall
            anchors.fill: parent
            backGroudImage: "../../images/sys/Background16.jpg"
            model: null
            scale: 0.0
        }

        TurnoverView {
            id:turnoverView
            itemWidth: 200
            anchors.fill: parent
            model: null
            scale: 0.0
        }

    }

    states: [
        State {
            name: "movie"
            PropertyChanges {
                target: movieWall
                //visible:true
                model:vedioDatas
            }
            PropertyChanges {
                target: musicWall
                //visible:false
                model:null
            }
            PropertyChanges {
                target: turnoverView
                //visible:false
                model:null
            }


        },
        State {
            name: "music"
            PropertyChanges {
                target: movieWall
                //visible:false
                model:null
            }
            PropertyChanges {
                target: musicWall
                //visible:true
                model:musicDatas
            }
            PropertyChanges {
                target: turnoverView
                //visible:false
                model:null
            }
        },
        State {
            name: "image"
            PropertyChanges {
                target: movieWall
                //visible:false
                model:null

            }
            PropertyChanges {
                target: musicWall
                //visible:false
                model:null

            }
            PropertyChanges {
                target: turnoverView
                //visible:true
                model:imageDatas

            }

        },

        State {
            name: "about"
        }

    ]

    transitions: [
        Transition {
            from: "music"
            to: "movie"
            SequentialAnimation {
                ParallelAnimation {
                    //NumberAnimation { target: contentView; property: "opacity"; to: 0.0; easing.type:Easing.InQuad; duration: 200}
                    NumberAnimation { target: musicWall; property: "scale"; to: 0.0; easing.type:Easing.InQuad; duration: 200}
                    NumberAnimation { target: musicWall; property: "rotation"; to: 360; easing.type:Easing.InQuad; duration: 200}

                }
                ParallelAnimation {
                    //NumberAnimation { target: contentView; property: "opacity"; to: 1.0; easing.type:Easing.InQuad; duration: 200}
                    NumberAnimation { target: movieWall; property: "scale"; to: 1.0; easing.type:Easing.InQuad; duration: 200}
                    NumberAnimation { target: movieWall; property: "rotation"; to: -360; easing.type:Easing.InQuad; duration: 200}

                }

            }

        },

        Transition {
            from: "movie"
            to: "music"
            SequentialAnimation {
                ParallelAnimation {
                    //NumberAnimation { target: contentView; property: "opacity"; to: 0.0; easing.type:Easing.InQuad; duration: 200}
                    NumberAnimation { target: movieWall; property: "scale"; to: 0.0; easing.type:Easing.InQuad; duration: 200}
                    NumberAnimation { target: movieWall; property: "rotation"; to: 360; easing.type:Easing.InQuad; duration: 200}

                }
                ParallelAnimation {
                    //NumberAnimation { target: contentView; property: "opacity"; to: 1.0; easing.type:Easing.InQuad; duration: 200}
                    NumberAnimation { target: musicWall; property: "scale"; to: 1.0; easing.type:Easing.InQuad; duration: 200}
                    NumberAnimation { target: musicWall; property: "rotation"; to: -360; easing.type:Easing.InQuad; duration: 200}

                }

            }

        },
        Transition {
            from: "movie"
            to: "image"
            SequentialAnimation {
                ParallelAnimation {
                    //NumberAnimation { target: contentView; property: "opacity"; to: 0.0; easing.type:Easing.InQuad; duration: 200}
                    NumberAnimation { target: movieWall; property: "scale"; to: 0.0; easing.type:Easing.InQuad; duration: 200}
                    NumberAnimation { target: movieWall; property: "rotation"; to: 360; easing.type:Easing.InQuad; duration: 200}

                }
                ParallelAnimation {
                    //NumberAnimation { target: contentView; property: "opacity"; to: 1.0; easing.type:Easing.InQuad; duration: 200}
                    NumberAnimation { target: turnoverView; property: "scale"; to: 1.0; easing.type:Easing.InQuad; duration: 200}
                    NumberAnimation { target: turnoverView; property: "rotation"; to: -360; easing.type:Easing.InQuad; duration: 200}

                }

            }

        },
        Transition {
            from: "image"
            to: "movie"
            SequentialAnimation {
                ParallelAnimation {
                    NumberAnimation { target: turnoverView; property: "scale"; to: 0.0; easing.type:Easing.InQuad; duration: 200}
                    NumberAnimation { target: turnoverView; property: "rotation"; to: 360; easing.type:Easing.InQuad; duration: 200}

                }
                ParallelAnimation {
                    NumberAnimation { target: movieWall; property: "scale"; to: 1.0; easing.type:Easing.InQuad; duration: 200}
                    NumberAnimation { target: movieWall; property: "rotation"; to: -360; easing.type:Easing.InQuad; duration: 200}

                }

            }

        },

        Transition {
            from: "image"
            to: "music"
            SequentialAnimation {
                ParallelAnimation {
                    NumberAnimation { target: turnoverView; property: "scale"; to: 0.0; easing.type:Easing.InQuad; duration: 200}
                    NumberAnimation { target: turnoverView; property: "rotation"; to: 360; easing.type:Easing.InQuad; duration: 200}

                }
                ParallelAnimation {
                    NumberAnimation { target: musicWall; property: "scale"; to: 1.0; easing.type:Easing.InQuad; duration: 200}
                    NumberAnimation { target: musicWall; property: "rotation"; to: -360; easing.type:Easing.InQuad; duration: 200}

                }

            }

        },
        Transition {
            from: "music"
            to: "image"
            SequentialAnimation {
                ParallelAnimation {
                    NumberAnimation { target: musicWall; property: "scale"; to: 0.0; easing.type:Easing.InQuad; duration: 200}
                    NumberAnimation { target: musicWall; property: "rotation"; to: 360; easing.type:Easing.InQuad; duration: 200}

                }
                ParallelAnimation {
                    NumberAnimation { target: turnoverView; property: "scale"; to: 1.0; easing.type:Easing.InQuad; duration: 200}
                    NumberAnimation { target: turnoverView; property: "rotation"; to: -360; easing.type:Easing.InQuad; duration: 200}

                }

            }

        }

    ]

    state: "movie"

    Rectangle {
        id:contentViewMask
        anchors.fill: parent
        color: "white"
        opacity: 0.0
    }

    FourButtons {
        id:fourButtons
        height: 140
        itemWidth: 70
        clip: false

        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter

    }


    BackButton {
        id:backButton
        x:560
        y:310
        width: 80
        height: 50
        //icon: "../images/sys/button_exit.png"
        buttonText: "exit"
    }

    Connections{
        target: backButton
        onBackButtonClicked:{
            enterNextPage(-1);
        }
    }

    BackButton {
        id:detailButton
        x:0
        y:310
        width: 80
        height: 50
        //icon: "../images/sys/button_detail.png"
        buttonText: "go to"
    }

    Connections{
        target: detailButton
        onBackButtonClicked:{
            enterNextPage(selectedItemIndex);
        }
    }


    Connections {
        target: fourButtons

        onCurrentItemClicked:{
            enterNextPage(index);
        }
    }

    Connections {
        target: movieWall

        onCurrentItemClicked:{
            onSubIconClick(index);
        }
    }

    Connections {
        target: musicWall

        onCurrentItemClicked:{
            onSubIconClick(index);
        }
    }

    AboutInfo{
        id:aboutInfo
        anchors.fill: parent
        icon: "../../cn/images/sys/EB_Gallery_video_demo.PNG"
        visible: false
    }

    ShowFullImage{
        id:fullImage
        visible: false
        //scale: 0.0
    }


    Connections{
        target: turnoverView
        onItemClicked:{
            console.log("count:", imageDatas.count);
            fullImage.icon = imageDatas[index].indexImage;
            fullImage.visible = true;
         }
    }



    onSelectedItemIndexChanged:{

        switch(selectedItemIndex){
        case 0:
            state = "movie";
            break;
        case 1:
            state = "music";
            break;

        case 2:
            state = "image";
            break;

        case 3:
            aboutInfo.visible = true;
            break;

        default:
            break;
        }
    }

    onStateChanged: {
        switch(state){
        case "movie":
            onIconEnter("imageFilm");
            break;
        case "music":
            onIconEnter("imageMusic");
            break;

        case "image":
            onIconEnter("imagePicture");
            break;

        case "about":
            break;
        default:
            break;
        }
    }

    onFourButtonsMovingChanged:{
//        setBlurEffect("contentView", fourButtonsMoving)
        if(fourButtonsMoving){
            contentViewMask.opacity = 0.5
        }else {
            contentViewMask.opacity = 0.0
        }
    }

}

